---
id: circular_progress
title: CircularProgress
sidebar_label: CircularProgress
---

The `CircularProgress` component is used to indicate loading states to the user. It displays a spinning indicator which can be customized in size.

## Usage

To incorporate the `CircularProgress` component, import it from your component library and optionally pass the `size` and `className` props for customization.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic CircularProgress

This demonstrates a basic usage of the `CircularProgress` component without any customization.

import CircularProgressBasicDemo from '../../samples/components/circular_progress/circular_progress_basic';
import CircularProgressBasicSource from '!!raw-loader!../../samples/components/circular_progress/circular_progress_basic';

<CodeSample>
    <CircularProgressBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{CircularProgressBasicSource}</CodeBlock>

## CircularProgress Sizes

The following examples show how to use the `CircularProgress` component in different sizes: small, medium, and large.

import CircularProgressSizesDemo from '../../samples/components/circular_progress/circular_progress_sizes';
import CircularProgressSizesSource from '!!raw-loader!../../samples/components/circular_progress/circular_progress_sizes';

<CodeSample>
    <CircularProgressSizesDemo/>
</CodeSample>

<CodeBlock language="tsx">{CircularProgressSizesSource}</CodeBlock>